<template>
  <div>
    
    <table v-bind:style="[{width:width},{border:border},{'text-align':algin}]">
      <caption>水果店开张了</caption>
        <tbody v-bind:style='{border:border}'>
          <tr>苹果 10&yen;/斤,折扣&lt;8折&gt;</tr>
        <tr>请输入你要购买的斤数
          <input type="text" v-model="count">
        </tr>
      <tr><button @click="total(8)">结账买单</button></tr>
      <tr>
        结账单:
        总价:<span>{{zongjia}}</span>元;
        折后价格: <span>{{zhehou}}</span>元;
        省了: <span>{{save}}</span>元
        </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      algin:'center',
      border:'1px solid black',
      width:'500px',
      count:'0',
      zongjia:'0',
      zhekou:'0',
      save:'0'
    }
  },
  methods:{
    total(num){
      this.zongjia=this.count*num
      this.zhehou=(this.count*num*0.8).toFixed(2)
      this.save=(this.zongjia-this.zhehou).toFixed(2)
    }
  }

}
</script>

<style>

</style>